<template>
    <div>
        <h1 class="title">小店区城市运行管理服务平台</h1>
        <p class="title-small">Xiaodian District Urban Operation Management Service Platform</p>
        <!-- 
        <ul class="card" @click="routerLink($event, _siteMap)">
            <li class="bg-gradient bg-gradient--ywzd" data-id="ywzd"></li>
            <li class="bg-gradient bg-gradient--zhxt" data-id="zhxt"></li>
            <li class="bg-gradient bg-gradient--hyyy" data-id="hyyy"></li>
            <li class="bg-gradient bg-gradient--gzfw" data-id="gzfw"></li>
            <li class="bg-gradient bg-gradient--yxjc" data-id="yxjc"></li>
            <li class="bg-gradient bg-gradient--zhpj" data-id="zhpj"></li>
            <li class="bg-gradient bg-gradient--jcjy" data-id="jcjy"></li>
            <li class="bg-gradient bg-gradient--sjjh" data-id="sjjh"></li>
            <li class="bg-gradient bg-gradient--sjhz" data-id="sjhz"></li>
            <li class="bg-gradient bg-gradient--yywh" data-id="yywh"></li>
        </ul> -->

        <ul class="card">
            <li v-for="(item, index) in dataList" :key="'a' + index">
                <div class="dataItem" :style="{ background: `url(${item.backgroundIcon}) no-repeat` }" @click="toUrl(item)">
                    <img :src='item.icon' />
                    <p>{{ item.name }}</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import { routerLink } from '@/mixins/routerLink'
import { WelCome } from '@/api/index.js'
export default {
    name: 'Modules',
    mixins: [routerLink],
    created() {
        this._siteMap = new Map([
            ['ywzd', 'http://221.204.12.174:9061/#/knowledge'], //业务指导
            ['zhxt', 'http://221.204.12.174:9061/#/StatisticsII'],//指挥协调
            ['hyyy', ''],//行业应用
            ['gzfw', ''],//公众服务
            ['yxjc', 'http://59.49.99.44:9999/wgcloud'],//运行监测
            ['zhpj', 'http://221.204.12.174:9061/#/DataAnalysis/Command'],//综合评价
            ['jcjy', 'http://221.204.12.174:9061/#/cockpit'],//决策建议
            ['sjjh', 'http://59.49.99.44:9096/'],//数据交换
            ['sjhz', 'http://221.204.12.174:9061/#/orderReceive'],//数据汇集
            ['yywh', 'http://221.204.12.174:9061/#/config'],//应用维护
        ]);
    },
    data() {
        return {
            dataList: [],
        };
    },

    methods: {
        getList() {
            WelCome.oaMenugetAll().then(res => {
                this.dataList = res.data
            })
        },
        toUrl(item) {
            if (item.linkType == 1) {
                window.open(item.link)
            } else {
                this.$router.push({ path: item.link });
            }
        }
    },

    mounted() {
        this.getList()
    },
}
</script>

<style lang="less" scoped>
h1.title {
    font-family: 'JingDianYaHei';
    color: #fff;
    font-weight: 400;
    font-size: 80px;
    margin-left: 188px;
    padding-top: 187px;
    position: relative;

    &::after {
        content: '';
        display: block;
        width: 120px;
        height: 6px;
        position: absolute;
        background: #0BD2D4;
        border-radius: 3px;
        bottom: -52px;
        left: 0;
    }
}

.title-small {
    font-size: 32px;
    font-family: Arial;
    font-weight: 400;
    color: #E6E3E3;
    line-height: 28px;
    opacity: 0.6;
    margin-left: 188px;
    margin-top: 100px;
}

.card {
    display: flex;
    flex-wrap: wrap;
    margin-left: 188px;
    margin-top: 40px;
    padding-top: 130px;
    background: url(../../assets/images/welcome/bg-modules-arrow.png) no-repeat 0 0;

    P {
        font-family: 'JingDianYaHei';
        color: #fff;
        text-align: center;
        font-size: 24px;
    }

    .dataItem {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        width: 301px;
        height: 210px;
        background-size: 100% 100% !important;

        img {
            width: 62px;
            height: 66px;
        }
    }
}

.bg-gradient {
    width: 293px;
    height: 200px;
    opacity: 0.8;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    margin-right: 20px;
    margin-bottom: 20px;
    background: url(../../assets/images/welcome/bg-modules-card.png) no-repeat 0 0;
    cursor: pointer;

    &.bg-gradient--ywzd {
        background-position: 0 0;
    }

    &.bg-gradient--zhxt {
        background-position: -313px 0;
    }

    &.bg-gradient--hyyy {
        background-position: -626px 0;
    }

    &.bg-gradient--gzfw {
        background-position: -938px 0;
    }

    &.bg-gradient--yxjc {
        background-position: -1251px 0;
    }

    &.bg-gradient--zhpj {
        background-position: 0 -220px;
    }

    &.bg-gradient--jcjy {
        background-position: -313px -220px;
    }

    &.bg-gradient--sjjh {
        background-position: -626px -220px;
    }

    &.bg-gradient--sjhz {
        background-position: -938px -220px;
    }

    &.bg-gradient--yywh {
        background-position: -1251px -220px;
    }

}
</style>